<template>
  <div>
    <!-- 地址 -->
<view class="address">
  <view class="address_detail">
    <view class="user_info">
      <view class="user_name">收货人:{{address.username}}</view>
      <view class="user_address">{{address.all}}</view>
    </view>
    <view class="user_phone">{{address.telNumber}}</view>
  </view>
</view>
<!-- 购物车区域 -->
<view class="cart_content">
  <!-- 购物车文字 -->
  <view class="cart_title">购物车</view>
  <!-- 主体 -->
  <view class="cart_main">
    <!-- 每项 -->
    <view class="cart_item" v-for="(item,index) in payList" :key="goods_id" :goods_id="item.goods_id">
      <!-- 图片 -->
      <navigator class="cart_pic" url="">
        <image mode="widthFix" :src="item.goods_small_logo"></image>
      </navigator>
      <!-- 商品信息 -->
      <view class="cart_info">
        <view class="goods_name">{{item.goods_name}}</view>
        <view class="goods_price_wrap">
          <view class="goods_price">${{item.goods_price}}</view>
          <view class="goods_num">x {{item.num}}</view>
        </view>
      </view>
    </view>
  </view>
</view>
<!-- 底部 -->
<view class="footer_tool">
  <!-- 总价格 -->
  <view class="total_price_wrap">
    <view class="total_price">
      合计:
      <text class="price_text">{{totalPrice}}</text>
    </view>
    <view class="yunfei">包含运费</view>
  </view>
  <!-- 结算 -->
  <view class="total_pay_wrap" @click="handleCreateOrder">
    <text>支付({{totalNum}})</text>
  </view>
</view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      address: {}, // 购物地址
      cart: [],//购物车列表
      totalPrice: 0,//总价
      totalNum: 0,//总件数
      payList: []
    }
  },
  methods:{
    // 创建订单
    handleCreateOrder() {
      const token = wx.getStorageSync('token')
      if (!token) {
        wx.navigateTo({
          url: '/pages/auth/auth',
          success: (result) => {},
          fail: () => { }
        });
      }
      // 有token ,创建请求头
      const header = { Authorization: token }
    },
    // 设置购物车状态: 总数 总价 勾选--公用事件
    setCart(cart) {
      // 总价,总数
      let totalPrice = 0, totalNum = 0
      let payList = []
      // 遍历
      cart.forEach(v => {
        if (v.check) {
          this.totalPrice += v.num * v.goods_price
          this.totalNum += v.num
          this.payList.push(v)
        }
      })
      console.log('payList', payList);
      wx.setStorageSync("cart", cart)
      // 提交数据
      this.cart=cart
    }
  },
  // 监听页面显示
  onShow: function () {
    // 获取地址
    this.address = wx.getStorageSync('address')
    // 更新购物车
    this.cart = wx.getStorageSync('cart') || []
    this.setCart(this.cart)
  } 
}
</script>

<style lang='less' scope>
page {
  padding-bottom: 90rpx;
}

// 地址
.address {
  padding: 20rpx;

  .address_detail {
    width: 100%;
    display: flex;
    font-size: 28rpx;

    .user_info {
      flex: 5;
    }

    .user_phone {
      flex: 3;
      text-align: center;
    }
  }

}

// 购物车区域
.cart_content {
  .cart_title {
    padding: 20rpx;
    font-size: 36rpx;
    color: var(--themeColor);
    border-top: 1rpx solid currentColor;
    border-bottom: 1rpx solid currentColor;
  }

  .cart_main {
    width: 100%;

    .cart_item {
      padding: 10px;
      display: flex;
      border-bottom: 1px solid #ccc;

      .cart_pic {
        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;

        image {
          width: 80%;
        }
      }

      .cart_info {
        flex: 4;
        display: flex;
        // 上下排
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

        // 上 - 名字
        .goods_name {
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          color: #666;
        }

        // 下 - 价格
        .goods_price_wrap {
          display: flex;
          width: 100%;
          justify-content: space-around;

          // 价格数字
          .goods_price {
            color: var(--themeColor);
            font-size: 34rpx;
          }

          // 增减按钮
          .goods_num {
            width: 55rpx;
            height: 55rpx;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }

  }
}

// 底部
.footer_tool {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 90rpx;
  background-color: #fff;

  display: flex;
  justify-content: center;
  align-items: center;

  // 左
  .total_price_wrap {
    flex: 2;
    text-align: right;
    padding-right: 15rpx;

    .total_price {
      .price_text {
        color: var(--themeColor);
        font-size: 34rpx;
        font-weight: 600;
      }
    }
  }

  // 右
  .total_pay_wrap {
    flex: 1;
    background-color: var(--themeColor);
    height: 100%;
    color: #fff;
    font-size: 32rpx;
    display: flex;
    justify-content: center;
    align-items: center;

  }
}
</style>